import { ref, reactive, type Ref, onMounted } from "vue";
import type { PaginationProps } from "@pureadmin/table";
import { getCarListApi } from "@/api/carApi";
export function useVehicleSelectColumns(
  vehicleSelectRef: Ref,
  selectValue,
  listArr
) {
  const vehicleSelectValue = ref("");
  const vehicleSelectColumns: TableColumnList = [
    {
      label: "车牌号",
      prop: "number"
    },
    {
      label: "状态",
      prop: "statusFormat"
    },
    {
      label: "品牌",
      prop: "brandFormat"
    }
  ];

  /** 分页配置 */
  const vehicleSelectPagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: "prev, pager, next",
    total: 0,
    background: true
  });

  /** 高亮当前选中行 */
  function vehicleSelectRowStyle({ row: { number } }) {
    return {
      cursor: "pointer",
      background:
        number === vehicleSelectValue.value ? "var(--el-fill-color-light)" : ""
    };
  }
  const vehicleSelectDataList = ref([]);
  async function onSearch() {
    const { result } = await getCarListApi();
    vehicleSelectDataList.value = result.list;
    vehicleSelectPagination.total = result.total;
  }
  /** 行点击 */
  function vehicleSelectOnRowClick(row, _column, _event, did) {
    selectValue[did - 1].vehicleSelectValue = row.number;
    vehicleSelectRef.value.blur();
    listArr[did - 1].vehicleId = row.vehicleId;
  }

  onMounted(() => {
    onSearch();
  });
  return {
    vehicleSelectColumns,
    vehicleSelectPagination,
    vehicleSelectDataList,
    vehicleSelectRowStyle,
    vehicleSelectOnRowClick
  };
}
